import {PanelGroup, PanelResizeHandle,Panel} from 'react-resizable-panels'
import {TopBarView} from "./views/TopBarView.tsx";
import {Main, PageLayout} from "./comps/Layout.tsx";
import {NestTerminal} from "./views/NestTerminal.tsx";

function App() {
  return (
    <PageLayout>
      <PanelGroup
        style={{
          height: '100%',
          width: '100%',
          overflow: 'hidden',
        }}
        direction="horizontal"
      >
        <Panel
          style={{backgroundColor:'#fafafa',display:'flex',flexDirection:'column'}}
          defaultSize={30}
          minSize={20}
          maxSize={45}
        >
          <Main>
            main
          </Main>
          <div>
            footer
          </div>
        </Panel>
        <PanelResizeHandle style={{backgroundColor:'#e8e8e8',width:'1px',height:'100%'}}/>
        <Panel
          style={{display:'flex',flexDirection:'column'}}
        >
          <div style={{
            display:'flex',
            flexDirection:'row',
          }}>
            <TopBarView />
          </div>
          <Main>
            <NestTerminal/>
            </Main>
          <div>
            footer
          </div>
        </Panel>
      </PanelGroup>

    </PageLayout>
  );
}

export default App;
